<template>
  <el-header>
    <PageHeader :router_list="router_list" :show-logo="true"/>
  </el-header>
  <el-main>
    <StudentCard v-if="userInfo.type === 0" :work="router.currentRoute.value.query"/>
    <TeacherCard v-else/>
  </el-main>
</template>

<script setup lang="ts">

import PageHeader from "../../components/PageHeader/index.vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import user from "../../stores/user.js";
import StudentCard from "./Type/Student/index.vue"
import TeacherCard from "./Type/Teacher/index.vue"
import {ElMessage} from "element-plus";

const props = defineProps({
  work: Object
});
const route = useRoute()
const router = useRouter()
const router_list = ref([
  {
    name: '用户设置',
    link: '/main/setting'
  },
  {
    name: '作业详情',
    link: '/main/homework'
  }
])
const userInfo = user()
const mainContentName = ref('submit')

const addWorkVisible = ref(false)
const addWorkRules = ref({
  code: [
    {required: true, message: '请输入加课码', trigger: 'blur'}
  ]
})

const addWorkForm = ref([])

const handleHeaderClick = () => {

}

const dialogVisible = ref(false)

const handelAddCourse = () => {

}

const message = (type, text) => {
  ElMessage({
    message: text,
    type: type,
    plain: true,
  })
}

</script>
<style>
.add-work {
  .el-dialog__header {
    height: 50px;
    border-bottom: 1px solid #dadce0;
    padding: 12px;
    line-height: 12px;

    .el-dialog__title {
      font-size: 16px;
      color: #333;
    }

    .el-dialog__headerbtn {
      position: absolute;
      top: 17px;
      right: 20px;
      padding: 0;
      background: 0 0;
      border: none;
      outline: 0;
      cursor: pointer;
      font-size: 24px;
    }
  }
}










.confirm_submit{
  width: 400px;
  height: 231px;
  border-radius: 8px;
  padding: 20px 0 0 0;
  >div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    div{
      font-size: 18px;
      color: #606266;
    }
  }
}
.el-dialog__title{
  margin-top: 30px;
  margin-left: 160px;
}
.submit-dialog-footer{
  width: 400px;
  border-top: 1px solid #dadce0;
  >div{
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .el-button--primary{
    margin-left: 20px;
  }
}

</style>
<style scoped>
.el-main {
  width: 1184px;
  margin: 0 auto;
  .el-tabs {
    .el-tabs__header {
      width: 1184px;
      margin: 0 auto 24px auto;
    }
  }
}

:deep(.el-tabs__content) {
  overflow: hidden;
  position: relative;

  .el-tab-pane {
    .cmps-student-submit {
      width: 1184px;
      margin: 0 auto;
      font-size: 12px;

      .detail-header {
        .cmp-work-list-card {
          width: 100%;
          display: flex;
          position: relative;

          .another-name {
            position: relative;
            margin-top: 5px;
            line-height: 13px;
            display: inline-block;
            width: 85px;
            text-align: center;
            max-height: 31px;
            margin-bottom: 2px;
          }

          .layout-left {
            display: flex;
            flex-direction: column;
            min-width: 85px;
            margin-right: 16px;
            font-size: 12px;

            img {
              height: 40px;
              max-width: 40px;
              margin: 0 auto 10px auto;
            }

            .another-name {
              position: relative;
              margin-top: 5px;
              line-height: 13px;
              display: inline-block;
              width: 85px;
              text-align: center;
              max-height: 31px;
              margin-bottom: 2px;
            }

            .lable-type {
              color: #3c4043;
              font-size: 13px;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 65px;
              max-height: 30px;
              line-height: 15px;
              word-break: break-all;
              display: inline-block;
              text-align: center;
            }
          }

          .layout-right {
            width: 100%;
            border-bottom: 1px solid #eee;
            padding: 0 0 4px;
            font-size: 14px;

            .layout-right-info {
              .info-title {
                font-size: 16px;
                margin-bottom: 12px;
                max-width: 500px;
                cursor: pointer;
                color: #212121;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                white-space: normal;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }

              .statue-bar {
                color: #5f6368;
                font-size: 12px;
                font-style: normal;

                .el-divider .el-divider--vertical {
                  font-style: normal;
                  display: inline-block;
                  width: 1px;
                  height: 1em;
                  margin: 0 8px;
                  vertical-align: middle;
                  position: relative;
                }
              }

              .learning-state {
                font-size: 12px;
                padding-top: 8px;
              }

              .font-color--warning {
                color: #ff941f;
              }
            }

            .layout-right-functional {
              display: flex;
              align-items: center;
              justify-content: end;
              padding-right: 40px;
              flex: 1;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

.el-divider.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 12px 0;
  background-color: #dadce0;
  position: relative;
}

.detail-container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.detailBodyTop{
  width: 1184px;
  height: 480px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.detailBodyBottom {
  min-height: 700px;

  > div:first-child {
    width: 1184px;
    height: 80px;
    background-color: #f8f9fa;
    margin-top: 30px;
    border-bottom: 2px solid #4285f4;
  }

  > div:nth-of-type(2) {
    width: 1184px;
    height: 70px;
    display: flex;
    flex-direction: row-reverse;
    > div {
      display: flex;
      margin-top: 20px;
    }
  }
  >img {
    position: relative;
    height: 200px;
    left: 400px;
    top: 100px;
  }
}

.comment-input-container{
  display: flex;
  >img{
    height: 40px;
    margin-top: 15px;
    margin-left: 15px;
  }
  >input{
    width: 1168px;
    height: 31px;
    margin-left: 20px;
    margin-top: 20px;
    border: none;
    background-color: #f8f9fa;
    &:focus{
      outline: none;
    }
  }
}

.checkBox-autonym{
  margin-top: 2px;
}
.comment{
  color:#3c4043;
  font-size: 20px;
  >span{
    font-size: 12px;
    color: #74787c;
    margin-left: 10px;
  }
}
.addAttach{
  line-height: 35px;
  font-family: font_family !important;
  font-size: 16px;
  font-style: normal;
  margin-left: 20px;
  margin-right: 20px;
  cursor: pointer;
}
.el-button-comment{
  width: 100px;
  height: 35px;
}

.submit-title{
  display: flex;
  justify-content: space-between;
  width: 1184px;
  height: 31px;
  margin-bottom: 24px;
  >div{
    font-size: 20px;
  }
}
.submit-body{
  width: 1184px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 24px;
  >div:first-child{
    font-size: 18px;
  }
  >div:nth-of-type(2){
    width: 1100px;
    height: 200px;
    margin-top: 20px;
    background: #f8f9fa;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    >img{
      width: 50px;
      cursor: pointer;
    }
    >div:nth-of-type(1){
      margin-top: 20px;
      font-size: 13px;
      color: #4285f4;
      cursor: pointer;
    }
    >div:nth-of-type(2){
      font-size: 13px;
      margin-top: 10px;
      color: #74787c;
    }
  }
  >div:nth-of-type(3){
    margin-top: 20px;
    font-size: 18px;
    >span{
      font-size: 13px;
      color: #74787c;
      margin-left: 15px;
    }
  }
}

.message-textarea{
  :deep(.el-textarea__inner){
    display: block;
    margin-top: 20px;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    border-radius: 4px;

  }
}

div:deep(.el-overlay-message-box){
  text-align: center;
}




</style>


